<ui:composition xmlns="http://www.w3.org/1999/xhtml"
			    xmlns:ui="http://java.sun.com/jsf/facelets"
			    xmlns:h="http://java.sun.com/jsf/html"
			    xmlns:f="http://java.sun.com/jsf/core"
			    xmlns:rich="http://richfaces.org/rich"
			    xmlns:a4j="http://richfaces.org/a4j"
			    template="/WEB-INF/layout/template.xhtml">
	
	<ui:define name="title">
		<h:outputText value="#{i18n['find.title']}"/>
	</ui:define>

	<ui:define name="contents">
		<h1><h:outputText value="#{i18n['find.heading']}"/></h1>
		
		<h:form id="findForm">
			<h:panelGrid columns="5">
				<h:outputLabel id="nachnameLabel"
				               value="#{i18n['find.nachname.prompt']}"
				               for="nachname"/>
				               
				<h:inputText id="nachname" value="#{kv.nachname}"
				             required="true"
				             requiredMessage="#{i18n['find.nachname.required']}"/>
				<rich:jQuery selector="#nachname" query="focus()"/>
				             
				<rich:suggestionbox id="nachnameSuggestion"
				                    for="nachname"
				                    minChar="2"
				                    frequency="1"
				                    suggestionAction="#{kv.findNachnamenByPrefix}"
				                    nothingLabel="#{i18n['find.nachname.nothing']}"
				                    var="kunde">
				    <h:column>
						<h:outputText value="#{kunde.nachname}"/>
					</h:column>
				</rich:suggestionbox>
				<a4j:status id="a4jStatus"
				            startText="#{i18n['a4j.inBearbeitung']}"/>
			</h:panelGrid>
			
			<p>
				<rich:message id="fehlermeldung" for="nachname" errorClass="error" warnClass="warn">
					<f:facet name="errorMarker">
						<h:graphicImage url="/images/error.gif"/>
					</f:facet>
				</rich:message>
			</p>
			
			<h:selectOneRadio id="darstellung" value="#{kv.darstellung}" layout="pageDirection">
				<f:selectItem itemValue="kvDataTableAuflisten" itemLabel="#{i18n['find.dataTableAuflisten']}"/>
				<f:selectItem itemValue="kvCommandButton" itemLabel="#{i18n['find.commandButton']}"/>
				<f:selectItem itemValue="kvCommandLink" itemLabel="#{i18n['find.commandLink']}"/>
				<f:selectItem itemValue="kvContextMenu" itemLabel="#{i18n['find.contextMenu']}"/>
				<f:selectItem itemValue="kvDoubleclick" itemLabel="#{i18n['find.doubleclick']}"/>
				<f:selectItem itemValue="kvSelectOneRadio" itemLabel="#{i18n['find.selectOneRadio']}"/>
				<f:selectItem itemValue="kvSelectOneMenu" itemLabel="#{i18n['find.selectOneMenu']}"/>
				<f:selectItem itemValue="kvSelectOneListbox" itemLabel="#{i18n['find.selectOneListbox']}"/>
				<f:selectItem itemValue="kvSelectManyCheckbox" itemLabel="#{i18n['find.selectManyCheckbox']}"/>
				<f:selectItem itemValue="kvSelectManyMenu" itemLabel="#{i18n['find.selectManyMenu']}"/>
				<f:selectItem itemValue="kvSelectManyListbox" itemLabel="#{i18n['find.selectManyListbox']}"/>
			</h:selectOneRadio>

			<h:panelGrid columns="3">
				<h:commandButton id="findSubmit" action="#{kv.find}" value="#{i18n['find.submit']}"/>
				<h:commandButton id="findReset" type="reset" value="#{i18n['find.reset']}"/>
			</h:panelGrid>
		</h:form>
	</ui:define>
</ui:composition>
